{% extends 'layout/base.html' %}
{% load static %}
{% load custom_tag %}
{% block title %}分类 | {% endblock %}
{% block banner %}
	<div class="bg-cover index-back pd-header about-cover">
		<div class="container">
			{% include 'layout/banner.html' %}
		</div>
	</div>
{% endblock %}
{% block css %}
	<style>
        .category_tag-1 {
            background-color: #F9EBEA;
        }

        .category_tag-2 {
            background-color: #F5EEF8;
        }

        .category_tag-3 {
            background-color: #D5F5E3;
        }

        .category_tag-4 {
            background-color: #E8F8F5;
        }

        .category_tag-5 {
            background-color: #ddf9e7;
        }

        .category_tag-6 {
            background-color: #d2d6f8;
        }

        .category_tag-7 {
            background-color: #f5deba;
        }

        .category_tag-8 {
            background-color: #f8f6c8;
        }

        .category_tag-9 {
            background-color: #d8f5c1;
        }

        .category_tag-10 {
            background-color: #def8f8;
        }

	</style>
{% endblock %}
{% block contents %}
	<main class="content">
		<div id="category-cloud" class="container chip-container">
			<div class="card">
				<div class="card-content">
					<div class="tag-title center-align">
						<i class="fas fa-bookmark"></i>&nbsp;&nbsp;文章分类
					</div>
					<div class="tag-chips">
						{% for category in categories %}
							<a href="{% url 'article_category' category.id %}" title="Python: 4">
                    <span class="chip center-align waves-effect waves-light
                             chip-default category_tag-{% random_num %}">{{ category.name }}
                        <span class="tag-length">{{ category.get_items }}</span>
                    </span>
							</a>
						{% endfor %}
					</div>
				</div>
			</div>
		</div>

		<article id="articles" class="container articles" style="position: relative; height: 2816px;">
			<div class="row tags-posts">
				{% for article in articles.object_list %}
					<div class="article tag-post col s12 m6 l4 aos-init" data-aos="zoom-in"
					     style="position: absolute; left: 0px; top: 2411px;">
						<div class="card">
							<a href="{% url 'article_detail' article.id %}">
								<div class="card-image tag-image">
									<img src="{{ article.cover }}" class="responsive-img" alt="{{ article.title }}">
									<span class="card-title">{{ article.title }}</span>
								</div>
							</a>
							<div class="card-content article-content">
								<div class="summary block-with-text">
									{{ article.desc }}
								</div>
								<div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>{{ article.add_time }}
                            </span>
									<span class="publish-author">
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                <a href="{% url 'article_category' article.category_id %}" class="post-category">
                                    {{ article.category }}
                                </a>
                            </span>
								</div>
							</div>
							<div class="card-action article-tags">
								{% for tag in  article.tag.all %}
									<a href="">
										<span class="chip tag-color">{{ tag }}</span>
									</a>
								{% endfor %}
							</div>
						</div>
					</div>
				{% endfor %}
			</div>
		</article>
	</main>

{% endblock %}
{% block pagination %}
	<div class="container paging">
		<div class="row">
			<div class="col s6 m4 l4">
				{% if articles.has_previous %}
					<a href="?{{ articles.previous_page_number.querystring }}"
					   class="left btn-floating btn-large waves-effect waves-light left-color">
				{% else %}
					<a class="left btn-floating btn-large disabled">
				{% endif %}
				<i class="fas fa-angle-left"></i>
				</a>
			</div>

			<div class="page-info col m4 l4 hide-on-small-only">
				<div class="center-align b-text-gray">{{ articles.number }} / {{ articles.pages | last }}</div>
			</div>

			<div class="col s6 m4 l4">
				{% if articles.has_next %}
					<a href="?{{ articles.next_page_number.querystring }}"
					   class="right btn-floating btn-large waves-effect waves-light right-color">
				{% else %}
					<a class="right btn-floating btn-large disabled">
				{% endif %}
				<i class="fas fa-angle-right"></i>
				</a>
			</div>

		</div>
	</div>
{% endblock %}